<template>
  <div class="detail-opt">
    <div v-for="(item, index) in data" :key="index">
      <el-tooltip :content="item.tooltip.content" placement="top">
        <el-button
          :icon="item.icon"
          type="text"
          :loading="loadingProp[item.prop]"
          v-show="optBtnIsShow(item)"
          @click="item.click && item.click({ row: detailData })"
        >
          {{
            typeof item.title == "function"
              ? item.title({ row: detailData })
              : item.title || typeof item.label == "function"
              ? item.label({ row: detailData })
              : item.label
          }}</el-button
        >
      </el-tooltip>
    </div>
    <!-- 转交 -->
    <el-dialog title="转交" append-to-body width="80%" :visible.sync="isShowDeliver">
      <account-change
        ref="accountChangeRef"
        v-if="isShowDeliver"
        :datas="selRows"
        :operateType="3"
        :isBatch="isBatch"
        @cancel="isShowDeliver = false"
        @confirm-success="deliverConfirmSuccess"
      ></account-change>
    </el-dialog>
    <!-- 申诉 -->
    <el-dialog title="申诉（发起BPM审批）" append-to-body width="60%" :visible.sync="isShowCloseOrder">
      <close-order
        :datas="selRows"
        v-if="isShowCloseOrder"
        @cancel="isShowCloseOrder = false"
        @confirm-success="closeOrderSuccess"
      ></close-order>
    </el-dialog>
    <!-- 延期 -->
    <el-dialog title="延期" :append-to-body="true" width="60%" :visible.sync="delayDiaShow">
      <delay-date-Form
        :datas="selRows"
        v-if="delayDiaShow"
        @cancel="delayDiaShow = false"
        @confirm-success="delaySuccess"
      ></delay-date-Form>
    </el-dialog>
    <!-- 处理 -->
    <el-dialog :title="title" append-to-body width="60%" :visible.sync="apiDiaShow"
      ><iframe
        style="width: 100%; height: 500px"
        id="h5-page"
        v-if="apiDiaShow"
        ref="iframeH5"
        :src="srcH5"
        frameborder="0"
        @load="loaded"
      ></iframe>
    </el-dialog>
  </div>
</template>

<script>
import operationBtnData from "../model";
import { orderOptMixin } from "@/mixins/orderOpt";
import closeOrder from "../component/closeOrder";
import accountChange from "components/accountChange";
import delayDateForm from "../component/delayDate";
import { getCloseOrderInfo } from "api/taskCenterApi";
//申诉状态: appeal: INIT("0", "初始"), DOING("1", "申诉中"), SUCCESS("2", "申诉成功"), CHECKING("3", "验收中"), CHECK_END("4", "验收结束"), FAIL("5", "申诉失败");
export default {
  name: "detailOperation",
  props: {
    detailData: Object,
  },
  mixins: [orderOptMixin],
  components: { closeOrder, accountChange, delayDateForm },
  data() {
    return {
      data: [],
      close: [
        {
          tooltip: {
            content: "打开申诉详情弹层",
          },
          hide: ({ row }) => {
            console.log(row);
            return row.appeal === "2" ? false : true;
          },
          label: "申诉详情",
          click: ({ row }) => {
            this.handleCloseOrder(row);
          },
        },
        {
          tooltip: {
            content: "新页面打开审批链接地址",
          },
          hide: ({ row }) => {
            return row.appeal === "2" ? false : true;
          },
          label: "审批详情",
          click: ({ row }) => {
            getCloseOrderInfo({ processId: row.processId }).then((res) => {
              const { bpmUrl } = res.data;
              window.open(bpmUrl);
            });
          },
        },
      ],
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    optBtnIsShow(item) {
      if (item.hide && item.hide({ row: this.detailData })) {
        return false;
      }
      if (item.disabled && item.disabled({ row: this.detailData })) {
        return false;
      }
      return true;
    },
    btnOmegaTrack(id, label) {
      let statusLabel = { pending: "待认领", doing: "进行中", done: "已完成" };
      let status = this.status == "pending" ? "todo" : this.status;
      let eventId = `${status}_${id}_ck`;
      let eventLabel = `工单中心-${statusLabel[eventId]}-${label}`;
      this.utils.omegaTrackEvent(eventId, eventLabel, { page: "detail" });
    },
    //申诉 确定成功回调
    closeOrderSuccess() {
      this.isShowCloseOrder = false;
      this.refreshPage();
    },
    //转交之后回退到列表界面
    gobackListPage() {
      this.$router.push({ path: `/task/${this.detailData.status}` });
    },
    delaySuccess() {
      this.delayDiaShow = false;
      this.refreshPage();
    },
    refreshPage() {
      window.location.reload();
    },
  },
  watch: {
    detailData: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.data = newVal.status === "close" ? this.close : operationBtnData.bind(this)("detail");
      },
    },
  },
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.detail-opt {
  .btn {
    color: #409eff;
    font-size: 14px;
    margin-right: 10px;
    cursor: pointer;
    &:hover {
      text-decoration: underline;
    }
  }
  // position: fixed;
  // right: 20px;
  // // bottom: 40%;
  // top: 65px;
  // z-index: 98;
  display: flex;
  ::v-deep .el-button {
    // height: 100px;
    // margin-bottom: 5px;
    // font-size: 13px;
    // padding: 15px 10px;
    // box-shadow: 0 0.4rem #dfd9d9;
    margin-right: 10px;
    span {
      // writing-mode: vertical-rl;
      // letter-spacing: 2px;
    }
  }
}
// .detail-opt {
//   position: fixed;
//   right: 20px;
//   bottom: 40%;
//   z-index: 98;
//   ::v-deep .el-button {
//     // height: 100px;
//     margin-bottom: 5px;
//     font-size: 13px;
//     padding: 15px 10px;
//     // box-shadow: 0 0.4rem #dfd9d9;
//     span {
//       writing-mode: vertical-rl;
//       letter-spacing: 2px;
//     }
//   }
// }
</style>
